<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#red{
				width: 200px;
				height: 200px;
				background: red;
				/*下外边距*/
				margin-bottom: 30px;
			}
			#yellow{
				width: 200px;
				height: 200px;
				background:yellow;
				/*上外边距*/
				margin-top: 50px;
			}
			img{
				width: 150px;
				border: 3px solid red;
			}
			.one{
				/*右边距*/
				margin-right: 50px;
			}
			.two{
				/*左边距*/
				margin-left:80px;
			}
			
			/*避免方法:*/
			/*通用选择器*/
			*{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<!--上下外边距会合并-->
		<!--左右外边距会累加-->
		<div id="red"></div>
		<div id="yellow"></div>
		<img src="minions.jpg" class="one"/><img src="minions.jpg" class="two"/>
	</body>
</html>
